﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户管理</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="../../assets/css/elementui.css">
    <link rel="stylesheet" type="text/css" href="/assets/libs/kindeditor/themes/default/default.css"/>

    <style>
        .el-card {
            margin-top: 4px
        }

        .el-dialog {
            margin-top: 1vh !important;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div id="app">
    <div>
        <el-card>
            <el-form :inline="true" :model="searchForm">

                <el-form-item>
                    <el-date-picker
                            v-model="searchForm.date"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="searchForm.checked1" label="有效" ></el-checkbox>
                    <el-checkbox v-model="searchForm.checked2" label="无效" ></el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button @click="search" type="primary">查询</el-button>
                    <el-button type="success" icon="el-icon-download" @click="export1">导出</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card>
            <el-table
                    :data="tableData"
                    border
                    height="calc(100vh - 200px)"
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        width="100"
                        label="观察员">
                </el-table-column>
                <el-table-column
                        prop="name"
                        width="100"
                        label="是否有效">
                    <template slot-scope="scope">
                        {{scope.row.status==1?'有效观察':'无效观察'}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="job"
                        width="200"
                        label="被观察者所在岗位">
                </el-table-column>
                <el-table-column
                        prop="rule"
                        width="200"
                        label="操作规程">
                    <template slot-scope="scope">
                        <el-image v-if="scope.row.ruleAnnex"
                                  style="width: 180px;height: 80px"
                                  :src="handleUrl(scope.row.ruleAnnex)"
                                  :preview-src-list="handlePreUrl(scope.row.ruleAnnex)"
                                  fit="contain"
                        >
                        </el-image>
                        <span v-else>无</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="work"
                        width="150"
                        label="被观察者所作工作">
                </el-table-column>
                <el-table-column
                        prop="fanghu"
                        width="150"
                        label="调整个人防护装备">
                </el-table-column>
                <el-table-column
                        prop="changePosition"
                        width="150"
                        label="改变原来的位置">
                </el-table-column>
                <el-table-column
                        prop="anpai"
                        width="150"
                        label="重新安排工作">
                </el-table-column>
                <el-table-column
                        prop="stopWork"
                        width="150"
                        label="停止工作">
                </el-table-column>
                <el-table-column
                        prop="other"
                        width="150"
                        label="其他">
                </el-table-column>


                <el-table-column
                        prop="crtTime"
                        label="创建时间"
                        width="180">
                </el-table-column>

                <el-table-column
                        label="操作"
                        width="180">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" @click="handleWatch(scope.row.id)">
                            查看记录
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.currentPage"
                    :page-size="page.rows"
                    layout="total, sizes, prev, pager, next"
                    :page-sizes="[10, 20, 50]"
                    :total="page.total">
            </el-pagination>
        </el-card>
    </div>

    <el-dialog width="80%" :visible.sync="dialogVisible"
               :before-close="handleClose"
    >
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="员工所处位置" name="first">
                <el-table
                        :data="tableDataView"
                        style="width: 100%">
                    <el-table-column
                            prop="zhuangji"
                            label="有被撞击、被夹住风险"
                           width="100">
                    </el-table-column>
                    <el-table-column
                            prop="zhuiluo"
                            label="有高处坠落风险"
                           width="100">
                    </el-table-column>
                    <el-table-column
                            prop="bandao"
                            label="有绊倒或滑倒风险">
                    </el-table-column>
                    <el-table-column
                            prop="wendu"
                            label="有接触极端温度的物体风险">
                    </el-table-column>
                    <el-table-column
                            prop="chudian"
                            label="有触电风险">
                    </el-table-column>
                    <el-table-column
                            prop="tunshi"
                            label="有接触、吸入或吞食有害物质风险">
                    </el-table-column>
                    <el-table-column
                            prop="zishi"
                            label="有不合理的姿势风险">
                    </el-table-column>
                    <el-table-column
                            prop="shebei"
                            label="有接触转动设备风险">
                    </el-table-column>
                    <el-table-column
                            prop="fuzai"
                            label="有搬运负荷过重风险">
                    </el-table-column>
                    <el-table-column
                            prop="zhendong"
                            label="有接触振动设备风险">
                    </el-table-column>
                    <el-table-column
                            prop="other1"
                            label="其他风险">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="劳动防护用品" name="second">
                <el-table
                        :data="tableDataView"
                        style="width: 100%">
                    <el-table-column
                            prop="eye"
                            label="眼睛和脸部"
                           width="100">
                    </el-table-column>
                    <el-table-column
                            prop="ear"
                            label="耳部"
                           width="100">
                    </el-table-column>
                    <el-table-column
                            label="头部"
                            prop="head"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="手和手臂"
                            prop="hand"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="脚和腿部"
                            prop="foot"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="呼吸系统"
                            prop="breath"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="躯干"
                            prop="body"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="呼吸系统"
                            prop="breath"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="其他"
                            prop="other2"
                            width="100"
                    >
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="工具和设备" name="third">
                <el-table
                        :data="tableDataView"
                        style="width: 100%">
                    <el-table-column
                            label="不适合该作业"
                            prop="bushihe"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="未正确使用"
                            prop="shiyong"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="工具和设备本身不安全"
                            prop="gongju"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="其他"
                            prop="other3"
                            width="100"
                    >
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="安全操作规程" name="fourth">
                <el-table
                        :data="tableDataView"
                        style="width: 100%">
                    <el-table-column
                            label="没有建立"
                            prop="create"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="不适用"
                            prop="avaliable"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="不可获取"
                            prop="get"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="员工不知道或不理解"
                            prop="lijie"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="没有遵照执行"
                            prop="zunzhao"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="其他"
                            prop="other4"
                            width="100"
                    >
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="人机工程" name="five">
                <el-table
                        :data="tableDataView"
                        style="width: 100%">
                    <el-table-column
                            label="是否符合人体工程学原则"
                            prop="fuhe"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="重复的动作"
                            prop="chongfu"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="躯体位置"
                            prop="bodyPosition"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="姿势"
                            prop="renjizishi"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="工作场所"
                            prop="changsuo"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="工具和把手"
                            prop="bashou"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="照明"
                            prop="zhaoming"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="噪音"
                            prop="zaoyin"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="其他"
                            prop="other5"
                            width="100"
                    >
                    </el-table-column>

                </el-table>
            </el-tab-pane>
            <el-tab-pane label="作业环境" name="six">
                <el-table
                        :data="tableDataView"
                        style="width: 100%">
                    <el-table-column
                            label="作业区域是否整洁有序"
                            prop="clean"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="工作场所是否井然有序"
                            prop="youxu"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="材料及工具的摆放是否适当"
                            prop="heli"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            label="其他"
                            prop="other6"
                            width="100"
                    >
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="动态抓拍" name="seven">

                <el-table
                        :data="tableDataView2"
                        style="width: 100%">
                    <el-table-column
                            label="抓拍内容"
                            prop="clean"
                    >
                        <template slot-scope="scope">
                            <el-image :src="handleUrl(scope.row.annex)" style="width: 200px;height: 200px">

                            </el-image>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="观察总结" name="eight">

                <el-table
                        :data="tableDataView"
                        style="width: 100%">
                    <el-table-column
                            label="不安全的行为状况和描述"
                            prop="xingwei"
                            width="300"
                    >
                    </el-table-column>
                    <el-table-column
                            label="纠正及防范错误"
                            prop="jiuzheng"
                            width="300"
                    >
                    </el-table-column>
                    <el-table-column
                            label="可能造成的危害"
                            prop="weihai"
                            width="300"
                    >
                    </el-table-column>
                </el-table>
            </el-tab-pane>

        </el-tabs>
    </el-dialog>
</div>
<script type="text/javascript" src="../../../assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="../../../assets/js/common.js?v=317"></script>
<script type="text/javascript" src="../../../assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/js.cookie.min.js"></script>
<script type="text/javascript" src="../../../assets/js/sqjx.js"></script>
<script type="text/javascript" src="../../../assets/js/custom.js"></script>
<script charset="utf-8" src="/assets/libs/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="/assets/libs/kindeditor/plugins/code/prettify.js"></script>
<script src="../../../assets/js/vue.min.js"></script>
<script src="../../../assets/js/elementui.js"></script>
<script>
    let that;
    new Vue({
        el: '#app',
        data: function () {
            return {
                BASE_ANNEX: BASE_ANNEX,
                addEditDialog: false,
                dialogVisible: false,
                searchForm: {
                    name: '',
                    checked1:true,
                    checked2:true,
                    materialname: '',
                    date: '',
                    delaydate: '0',
                },
                id: '',
                tabIndex:'',
                activeName:'first',
                page: {
                    total: 0,
                    currentPage: 1,
                    rows: 10,
                },

                tableData: [],
                tableDataView: [],
                tableDataViewOri: [],
                tableDataView2: [],

            }
        },
        mounted: function () {
            that = this
            that.search();
        },
        methods: {
            handleUrl(e) {
                let url = BASE_ANNEX + e + '?token=' + Cookies.get("token");
                return url;
            },
            handlePreUrl(e) {
                let url = BASE_ANNEX + e + '?token=' + Cookies.get("token");
                return [url];
            },
            handleWatch(e){
                that.id=e;
                that.tabIndex='0';
                that.dialogVisible=true;
                that.queryWatch();
            },
            handleClick(e){

                var key=[];
                if(that.activeName=='first'){
                    key=[ 'zhuangji', 'zhuiluo', 'bandao', 'wendu', 'chudian', 'tunshi', 'zishi', 'shebei', 'fuzai', 'zhendong', 'other1',]
                } else if(that.activeName=='second'){
                    key=[ 'eye', 'ear', 'head', 'hand', 'foot', 'body', 'breath', 'other2', ]
                }else if(that.activeName=='third'){
                    key=[ 'bushihe', 'shiyong', 'gongju', 'other3', ]
                }else if(that.activeName=='fourth'){
                   key=[ 'create', 'avaliable', 'get', 'lijie', 'zunzhao', 'other4', ]
               } else if(that.activeName=='five'){
                    key=[ 'fuhe', 'chongfu', 'bodyPosition', 'renjizishi', 'changsuo', 'bashou', 'zhaoming','zaoyin','other5',]
                }else if(that.activeName=='six'){
                    key=[ 'clean', 'youxu', 'heli', 'other6', ]
                }else if(that.activeName=='eight'){
                    key=[ 'xingwei', 'jiuzheng', 'weihai', ]
                }
                that.tableDataView=[];
                that.tableDataViewOri.map(item=>{
                    let  flag=false;
                    let temp={};
                    key.forEach(x=>{
                        let val=item[x];
                        temp[x]=val;
                        if(item[x]){
                            flag = true
                        }
                    })
                    if(flag){
                        that.tableDataView.push(temp);
                    }
                })
                console.log('that.tableDataView',that.tableDataView)
            },
            saveComment() {
                let param = JSON.parse(JSON.stringify(that.form));
                if (that.form.status == 2) {
                    delete param.comment;
                } else if (that.form.status == 3) {
                    delete param.comment2;
                }
                $.post('/office/healthDanger/changeStatus', param, function (res) {
                    if (res.code == 200) {
                        that.dialogVisible = false;
                        that.form.comment2 = '';
                        that.form.comment = '';
                        that.search();
                    }
                })
            },
            queryWatch(){
                $.get('/office/safePostWatch/querySafePostWatchList', {postId:that.id}, function (res) {
                    if (res.code == 200) {
                        that.tableDataViewOri=JSON.parse(JSON.stringify(res.obj));
                        that.tableDataView=[];
                        let key=[ 'zhuangji', 'zhuiluo', 'bandao', 'wendu', 'chudian', 'tunshi', 'zishi', 'shebei', 'fuzai', 'zhendong', 'other1',]
                        that.tableDataViewOri.map(item=>{
                            let  flag=false;
                            let temp={};
                            key.forEach(x=>{
                                let val=item[x];
                                temp[x]=val;
                                if(item[x]){
                                    flag = true
                                }
                            })
                            if(flag){
                                that.tableDataView.push(temp);
                            }
                       })
                    }
                })
                $.get('/office/safePostAnnex/querySafePostAnnexList', {postId:that.id}, function (res) {
                    if (res.code == 200) {
                        that.tableDataView2=res.obj
                    }
                })
            },
            handleClose(){
                that.activeName='first'
                that.tabIndex='0';
                that.dialogVisible=false;
            },
            handleAnnex(e) {
                var a = e.split(',').map(item => {
                    return that.BASE_ANNEX + item + '?token=' + getToken()
                })
                return a;
            },
            search: function () {
                var params = JSON.parse(JSON.stringify(this.searchForm));
                params.startDate = params.date[0];
                params.endDate = params.date[1];
                params.page = this.page.currentPage;
                params.rows = this.page.rows;
                $.get('/office/safePost/querySafePostList', params, function (res) {
                    that.tableData = res.obj.rows
                    that.page.total = res.obj.total
                })
            },

            handleSizeChange() {

            },
            handleCurrentChange(currentPage) {
                that.page.currentPage = currentPage;
                that.search()
            },
            export1() {
                var params = JSON.parse(JSON.stringify(this.searchForm));
                params.startDate = params.date[0];
                params.endDate = params.date[1];
                if(!params.startDate||!params.endDate){
                    this.$message.warning('请输入日期')
                    return
                }
                window.location = BASE_URL + '/office/export/safeInfo?token=' + Cookies.get('token') +
                    '&startDate=' + params.startDate +
                    '&endDate=' + params.endDate;
            },
        },
    })
</script>
</body>
</html>
